<template>
  <transition name="vac-fade-spinner" appear>
    <div
      v-if="show"
      :class="{
        'vac-container-center': !infinite,
        'vac-container-top': infinite,
      }"
    >
      <div id="vac-circle" />
    </div>
  </transition>
</template>

<script>
export default {
  name: "Loader",

  props: {
    show: { type: Boolean, default: false },
    infinite: { type: Boolean, default: false },
  },
};
</script>

<style lang="scss">
.vac-container-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

.vac-container-top {
  padding: 21px;

  #vac-circle {
    height: 20px;
    width: 20px;
  }
}

#vac-circle {
  margin: auto;
  height: 28px;
  width: 28px;
  border: 3px rgba(0, 0, 0, 0.25) solid;
  border-top: 3px var(--chat-color-spinner) solid;
  border-right: 3px var(--chat-color-spinner) solid;
  border-bottom: 3px var(--chat-color-spinner) solid;
  border-radius: 50%;
  -webkit-animation: vac-spin 1s infinite linear;
  animation: vac-spin 1s infinite linear;
}

@media only screen and (max-width: 768px) {
  #vac-circle {
    height: 24px;
    width: 24px;
  }

  .vac-container-top {
    padding: 18px;

    #vac-circle {
      height: 16px;
      width: 16px;
    }
  }
}

@-webkit-keyframes vac-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes vac-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
</style>
